<template>
  <div class="home">
    <!-- 个人信息 快速入口 -->
    <Wrapper></Wrapper>
    <NavBg></NavBg>
    <div class="container">
      <!-- 促销专区 start -->
      <div class="g-PromotionArea">
        <div class="m-titleMod">
            <h2>促销专区</h2>
            <p class="en"><em>PROMOTION ZONE</em></p>
        </div>
        <div class="flex PromotionArea-bd">
          <!-- 促销海报 -->
          <router-link to="">
            <img class="banner" src="../assets/img/ccjg.png">
          </router-link>
          <!-- 促销海报 end -->
          <div id="J-videoMainWrapper" class="cell m-videoContainer">
            <div class="item mod1 J-tabCnt">
              <div data-id="0" class="item J-cnt active">
                <div class="h5-layer-conatiner">
                    <!-- <h3>工流界-企业宣传片</h3> -->
                    <div class="J-videoMask m-videoMask" @click="tabVideo()">
                      <img src="../assets/img/fnx-0.png">
                    </div>
                </div>
              </div>
            </div>
            <div class="mod2 J-tabHd">
              <div data-id="1" class="item">
                  <img src="../assets/img/fnx-1.png">
              </div>
              <div data-id="2" class="item">
                  <img src="../assets/img/fnx-2.png">
              </div>
              <div data-id="3" class="item">
                  <img src="../assets/img/fnx-3.png">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 热门品牌 -->
      <div id="J-brandWrapper" class="g-brand-index">
        <div class="m-titleMod">
            <h2>热门品牌</h2>
            <p class="en">
              <em>HOT BRANDS</em>
            </p>
        </div>
        <div class="swiper-container-brand brandBd">
          <ul>
            <li v-for="item in brands" :key="item.id">
              <router-link :to="'/brandId/?id=' + item.id" class="item" target="_blank">
                <p class="title">
                  <em>{{ item.name }}</em>
                </p>
                <!--todo 商品图片切换-->
                <!--真实图片-->
                <!--<img :src="item.image" alt="" />-->
                <!--本地图片-->
                <img v-if="item.image" :src="item.pc_logo_image"  alt="" />
                <img v-else src="../assets/img/upload2.png" alt="">
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <!-- 商品专区 -->
      <div class="m-titleMod">
        <h2>商品专区</h2>
        <p class="en"><em>COMMODITY AREA</em></p>
      </div>
      <!-- 商品专区 tab分类 -->
      <TabContent v-for="item in goods" :key="item.id" :goods="item"></TabContent>

    </div>
<!--    <sideBar/>-->
  </div>
</template>
<script type="text/javascript" src="https://tajs.qq.com/stats?sId=66566068" charset="UTF-8"></script>
<script>
// @ is an alias to /src
import Wrapper from '@/components/Wrapper.vue'
import NavBg from '@/components/NavBg.vue'
import TabContent from '@/components/TabContent.vue'
// import sideBar from '@/components/side-bar.vue'
import { mapMutations } from 'vuex'
import { brands } from '@/api/category'
import { hotSeries } from '@/api/home'
export default {
  name: 'Home',
  metaInfo: {
    title: '首页',
    titleTemplate: '工流界MRO一站式采购商城'
  },
  components: {
    Wrapper,
    NavBg,
    TabContent
    // sideBar
  },
  data () {
    return {
      tabPosition: 'left',
      bannerData: [],
      goods: [],
      brands: [],
      b_show: true
    }
  },
  created () {
    this.setHasNav(true)
    this.fetchBrands()
    this.fetchHotSeries()
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    document.removeEventListener('scroll', this.handleScroll)
    this.setHasNav(false)
  },
  methods: {
    ...mapMutations({
      setHasNav: 'app/SET_PAGE_HAS_NAV'
    }),
    tabVideo () {
    },
    async fetchBrands () {
      const res = await brands()
      this.brands = res
    },
    async fetchHotSeries () {
      const res = await hotSeries()
      this.goods = res.data
    },
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 200) {
        this.setHasNav(false)
      } else if (scrollTop <= 200) {
        this.setHasNav(true)
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  z-index: 0;
  margin-bottom: 90px;
  // .conatiner:hover .m-videoMask img::after {
  //   -webkit-transform: scale(1.1);
  //   -ms-transform: scale(1.1);
  //   -o-transform: scale(1.1);
  //   transform: scale(1.1);
  // }
  // 促销专区
  .g-PromotionArea {
    margin: 18px 0 0;
    .m-titleMod {
      color: #4448f8;
      text-align: center;
      font-weight: bold;
      h2 {
        font-size: 20px;
        font-weight: bold;
      }
      .en {
        position: relative;
        margin: 6px 0 0;
        font-size: 27px;
        opacity: .2;
        em {
          position: relative;
          display: inline-block;
          padding: 0 26px;
          background: #f5f5f5;
          letter-spacing: .12em;
          font-weight: lighter;
        }
      }
      .en:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 2px;
        left: 0;
        top: 50%;
        margin-top: -1px;
        background: rgba(68,72,248,.5);
      }
    }
    .cell {
      position: relative;
    }
    .PromotionArea-bd {
      width: 100%;
      margin: 20px 0 0;
      position: relative;
      height: 370px;
      display: block;
      position: relative;
      .cell {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 0;
        width: 730px;
        height: 370px;
        -webkit-transition: linear .2s;
        -o-transition: linear .2s;
        transition: linear .2s;
        // background: url('http://img.zydmall.com//upload/20200219/202002191202433117.jpg') no-repeat;
      }
      .m-videoContainer {
        padding-left: 12px;
        position: relative;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 0;
        -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
        display: block;
        position: relative;
        .item.mod1 {
          overflow: hidden;
          height: 254px;
          margin-top: 0;
          background: #3f393c;
          box-sizing: border-box;
          -webkit-transition: ease-in-out .3s;
          -o-transition: ease-in-out .3s;
          transition: ease-in-out .3s;
          .item {
            display: block;
            height: 100%;
            margin-top: 0;
            .h5-layer-conatiner {
              position: relative;
              height: 100%;
              .m-videoMask {
                cursor: pointer;
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                -webkit-transition: linear .2s;
                -o-transition: linear .2s;
                transition: linear .2s;
                background: url('https://haokan.baidu.com/v?vid=9797408655817173729&pd=bjh&fr=bjhauthor&type=video') no-repeat center center;
                background-size: cover;
                z-index: 3;
              }
              // .m-videoMask:after {
              //   position: absolute;
              //   content: '';
              //   width: 46px;
              //   height: 46px;
              //   left: 50%;
              //   top: 50%;
              //   margin: -30px;
              //   background: url('../assets/img/shipin_icon.png') no-repeat center center;
              //   background-size: 100%;
              //   z-index: 9;
              //   -webkit-transition: linear .2s;
              //   -o-transition: linear .2s;
              //   transition: linear .2s;
              // }
              video {
                width: 100%;
                height: 100%;
                background: #000;
                object-fit: contain;
              }
            }
          }
        }
        .mod2 {
          margin-top: 12px;
          .item {
            position: relative;
            float: left;
            width: 146px;
            height: 104px;
            margin: 0 0 0 10px;
            overflow: hidden;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
          }
          .item:first-child {
            margin-left: 0;
          }
          // .item:before {
          //   position: absolute;
          //   content: '';
          //   width: 46px;
          //   height: 46px;
          //   left: 50%;
          //   top: 50%;
          //   margin: -30px;
          //   background: url('../assets/img/shipin_icon.png') no-repeat center center;
          //   background-size: 100%;
          //   -webkit-transition: linear .2s;
          //   -o-transition: linear .2s;
          //   transition: linear .2s;
          // }
          // .item:hover::before {
          //   -webkit-transform: scale(1.2);
          //   -ms-transform: scale(1.2);
          //   -o-transform: scale(1.2);
          //   transform: scale(1.2);
          // }
        }
      }
    }
  }
  // 热门品牌
  .g-brand-index {
    margin: 30px 0 0;
    .m-titleMod {
      color: #4448f8;
      text-align: center;
      font-weight: bold;
      h2 {
        font-size: 20px;
        font-weight: bold;
      }
      .en {
        position: relative;
        margin: 6px 0 0;
        font-size: 27px;
        opacity: .2;
        em {
          position: relative;
          display: inline-block;
          padding: 0 26px;
          background: #f5f5f5;
          letter-spacing: .12em;
          font-weight: lighter;
        }
      }
      .en:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 2px;
        left: 0;
        top: 50%;
        margin-top: -1px;
        background: rgba(68,72,248,.5);
      }
    }
    .brandBd {
      height: 460px;
      overflow: hidden;
      ul {
        padding: 14px 0;
        overflow: hidden;
        li {
          position: relative;
          float: left;
          width: 20%;
          height: 144px;
          padding: 0 45px;
          box-sizing: border-box;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          -moz-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
          -webkit-box-pack: center;
          -moz-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          .item {
            position: relative;
            .title {
              position: absolute;
              width: auto;
              white-space: nowrap;
              left: 50%;
              margin: 0 0 23px 16px;
              padding: 3px 8px 3px 10px;
              bottom: 100%;
              font-size: 14px;
              color: #9b9b9b;
              .title em {
                -webkit-transform: translate3d(0,0,0);
                -ms-transform: translate3d(0,0,0);
                -o-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
                opacity: 1;
                -webkit-transition: .15s ease-in-out .25s;
                -o-transition: .15s ease-in-out .25s;
                transition: .15s ease-in-out .25s;
              }
            }
            img {
              position: relative;
              max-width: 128px;
              max-height: 58px;
              z-index: 1;
              -webkit-transition: animation .5s;
              -o-transition: animation .5s;
              transition: animation .5s;
            }
          }
          .item:before {
            display: none;
            position: absolute;
            content: '';
            width: 5px;
            height: 5px;
            left: 50%;
            top: -5px;
            margin-left: -3px;
            border-radius: 100%;
            background: #b4b4b4;
          }
          .item:after {
            position: absolute;
            content: '';
            width: 0;
            height: 19px;
            left: 50%;
            top: -25px;
            margin-left: 1px;
            background: url(~@/assets/img/line-brand.png) no-repeat left bottom
          }
        }
        li:hover {
          .item {
            color: #4448f8;
          }
          // .item:before {
          //   display: block;
          // }
          // .item .title:after {
          //   width: 100%;
          //   -webkit-transition: .2s ease-in-out .3s;
          //   -o-transition: .2s ease-in-out .3s;
          //   transition: .2s ease-in-out .3s;
          // }
          img {
            -webkit-animation: aniBrand 1.5s .3s ease-in-out infinite;
            -o-animation: aniBrand 1.5s .3s ease-in-out infinite;
            animation: aniBrand 1.5s .3s ease-in-out infinite;
            animation-duration: 1.5s;
            animation-timing-function: ease-in-out;
            animation-delay: 0.3s;
            animation-iteration-count: infinite;
            animation-direction: normal;
            animation-fill-mode: none;
            animation-play-state: running;
            animation-name: aniBrand;
          }
        }
      }
    }
  }
  // 商品专区
  .m-titleMod {
    color: #4448f8;
    text-align: center;
    font-weight: bold;
    h2 {
      font-size: 20px;
      font-weight: bold;
    }
    .en {
      position: relative;
      margin: 6px 0 0;
      font-size: 27px;
      opacity: .2;
      em {
        position: relative;
        display: inline-block;
        padding: 0 26px;
        background: #f5f5f5;
        letter-spacing: .12em;
        font-weight: lighter;
      }
    }
    .en:before {
      position: absolute;
      content: '';
      width: 100%;
      height: 2px;
      left: 0;
      top: 50%;
      margin-top: -1px;
      background: rgba(68,72,248,.5);
    }
  }
}

.g-brand-index .brandBd ul li .item:before {
  display: none;
  position: absolute;
  content: '';
  width: 5px;
  height: 5px;
  left: 50%;
  top: -5px;
  margin-left: -3px;
  border-radius: 100%;
  background: #b4b4b4
}

.g-brand-index .brandBd ul li:hover .item:before {
  display: block
}

.g-brand-index .brandBd ul li .item:after {
  position: absolute;
  content: '';
  width: 0;
  height: 19px;
  left: 50%;
  top: -25px;
  margin-left: 1px;
  background: url(~@/assets/img/line-brand.png) no-repeat left bottom
}

.g-brand-index .brandBd ul li:hover .item:after {
  width: 15px;
  -webkit-transition: .15s linear .1s;
  -o-transition: .15s linear .1s;
  transition: .15s linear .1s
}

.g-brand-index .brandBd ul li .item .title {
  position: absolute;
  width: auto;
  white-space: nowrap;
  left: 50%;
  margin: 0 0 23px 16px;
  padding: 3px 8px 3px 10px;
  bottom: 100%;
  font-size: 14px;
  color: #9b9b9b
}

.g-brand-index .brandBd ul li .item .title em {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translate3d(0,-5px,0);
  -ms-transform: translate3d(0,-5px,0);
  -o-transform: translate3d(0,-5px,0);
  transform: translate3d(0,-5px,0)
}

.g-brand-index .brandBd ul li:hover .item .title em {
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  opacity: 1;
  -webkit-transition: .15s ease-in-out .25s;
  -o-transition: .15s ease-in-out .25s;
  transition: .15s ease-in-out .25s
}

.g-brand-index .brandBd ul li .item .title:after {
  position: absolute;
  content: '';
  width: 0;
  height: 1px;
  left: 0;
  bottom: 0;
  background: #cacaca
}

.g-brand-index .brandBd ul li:hover .item .title:after {
  width: 100%;
  -webkit-transition: .2s ease-in-out .3s;
  -o-transition: .2s ease-in-out .3s;
  transition: .2s ease-in-out .3s
}

</style>
